import React, {Component} from "react";

class Label extends Component {
    constructor(props) {
        super(props);
        this.state = {
            width: !!this.props.width ? this.props.width : 100,
            height: !!this.props.height ? this.props.height : 100,
            top: !!this.props.top ? this.props.top : 0,
            left: !!this.props.left ? this.props.left : 0,
            text: !!this.props.text ? this.props.text : null,
        };
        this.commonMove = this.commonMove.bind(this);
        this.moveImg = this.moveImg.bind(this);
        this.touchMoveImg = this.touchMoveImg.bind(this);
    }

    UNSAFE_componentWillMount() {
        const {pointValue} = this.props;
        if (Number(pointValue) < 40 && Number(pointValue) > 25) {
            this.setState({text: `${pointValue} ℃`});
        } else if (Number(pointValue) > 40 && Number(pointValue) < 210) {
            this.setState({text: `${pointValue} %RH`});
        } else if (Number(pointValue) < 5) {
            this.setState({text: `speed is : ${pointValue}`});
        } else if (Number(pointValue) < 15 && Number(pointValue) > 10) {
            this.setState({text: `${pointValue} kwh`});
        } else if (Number(pointValue) < 230 && Number(pointValue) > 210) {
            this.setState({text: `${pointValue} v`});
        }
    }

    componentDidMount() {
        this.refs.label.style.lineHeight = `${this.refs.label.clientHeight}px`;
    }

    //这个函数太牛逼了
    moveImg(ev) {
        ev.preventDefault();
        const {drag, box} = this.props;
        if (drag) {
            const {top, left, width, height} = this.state;
            const {clientWidth, clientHeight} = box;
            let disx = ev.pageX - left;
            let disy = ev.pageY - top;
            let maxWidth = clientWidth - width;
            let maxHeight = clientHeight - height;
            document.onmousemove = (ev) => {
                this.commonMove(ev, disx, disy, maxWidth, maxHeight);
            };
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmousedown = null;
            };
        }
    }

    //这个函数太牛逼了
    touchMoveImg(ev) {
        ev.preventDefault();
        ev = ev.nativeEvent.changedTouches[0];
        const {drag, box} = this.props;
        if (drag) {
            const {top, left, width, height} = this.state;
            const {clientWidth, clientHeight} = box;
            let disx = ev.pageX - left;
            let disy = ev.pageY - top;
            let maxWidth = clientWidth - width;
            let maxHeight = clientHeight - height;
            document.ontouchmove = (ev) => {
                ev = ev.changedTouches[0];
                this.commonMove(ev, disx, disy, maxWidth, maxHeight);
            };
            document.ontouchend = () => {
                document.ontouchmove = null;
                document.ontouchstart = null;
            };
        }
    }

    commonMove(ev, disx, disy, maxWidth, maxHeight) {
        let left = 10 * parseInt((ev.pageX - disx) / 10);
        let top = 10 * parseInt((ev.pageY - disy) / 10);
        if (left < 0) {
            left = 0;
        }
        if (top < 0) {
            top = 0;
        }
        if (top > maxHeight) {
            top = maxHeight;
        }
        if (left > maxWidth) {
            left = maxWidth;
        }
        this.setState({
            left: left,
            top: top,
        });
    }

    render() {
        const {id, editable} = this.props;
        const {width, height, top, left, text} = this.state;
        return (
            <span
                id={id}
                onMouseDown={this.moveImg}
                editable={editable}
                ref="label"
                style={{
                    display: "inline-block",
                    textAlign: "center",
                    whiteSpace: "nowrap",
                    width: width,
                    height: height,
                    top: top,
                    left: left,
                    cursor: "move",
                    background: "rgba(128, 128, 128, 0.38)",
                    color: "#000000",
                    position: "absolute",
                    zIndex: 1,
                }}
            >
        {text}
      </span>
        );
    }
}

export default Label;
